<template>
  <view class="hot-container">
    <image class="logo" src="../../static/images/logo.png" mode="aspectFit" />
    <view class="search-box" @click="onToSearch">
      <my-search placeholderText="这是Uniapp自定义组件"></my-search>
    </view>
    <!-- tabs -->
    <!-- uniapp中父向子传输数据 遵循v-bind指令 -->
    <!-- 1.吸顶效果 -->
    <!-- 2.控制列表滚动位置 -->
    <view class="tab-sticky" id="tab-sticky">
      <my-tabs
        :tabData="tabData"
        :defaultIndex="currentIndex"
        @tabClick="onTabClick"
      ></my-tabs>
    </view>
    <!-- list视图 -->
    <!-- 
			1. 使用mock数据，构建list的基本结构
			2. 美化样式
			3. 根据tab的切换 获取真实数据
			5. 让list与tabs联动的能力
			5.1 思考如何让list拥有左右切换的能力
			 实用swiper对其进行改造
			 5.2 list列表的高度展示错误 ： 原因是没有为swiper指定高度，解决：计算item的高度，叠加在一起，就可以得到swiper高度
			 5.3 切换tab list的卡顿问题 原因：swiper动画未完成时，就获取数据渲染DOM
			 解决方案：swiper动画完成后 获取数据 渲染dom
			6. 完成list与tabs联动
			swiper切换时 list联动
		 -->

    <swiper
      class="swiper"
      :current="currentIndex"
      :style="{
        height: currentSwiperHeight + 'px',
      }"
      @animationfinish="onSwiperEnd"
      @change="onSwiperChange"
    >
      <!-- swiper-item的数量由tabData进行决定 -->
      <swiper-item v-for="(tabItem, tabIndex) in tabData" :key="tabIndex">
        <view>
          <!-- 加载动画 -->
          <uni-load-more status="loading" v-if="isLoading"> </uni-load-more>
          <block v-else>
            <!-- 列表循环数据 -->
            <hot-list-item
              :class="'hot-list-item-' + tabIndex"
              v-for="(item, index) in listData[tabIndex]"
              :key="index"
              :ranking="index + 1"
              :data="item"
              @click="onItemClick(item)"
              >{{ item }}</hot-list-item
            >
          </block>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getHotTabs, getHotListFromTabType } from "@/api/hot.js";
export default {
  data() {
    return {
      tabData: [],
      // 激活项
      currentIndex: 0,
      // 以index为key，以对应的list为value
      listData: {},
      // loading
      isLoading: true,
      // 当前swiper高度
      currentSwiperHeight: 0,
      // 缓存高度的计算结果，以index为key，对应的高度为value
      swiperHeightData: {},
      // 当前的滚动距离
      currentPageScrollTop: 0,
    };
  },
  methods: {
    /**
     * item点击事件
     */
    onItemClick(item) {
      console.log(item.id);
      uni.navigateTo({
        url: `/subpkg/pages/blog-detail/blog-detail?author=${item.user_name}&articleId=${item.id}`,
      });
    },
    async loadHotTabs() {
      const { data: res } = await getHotTabs();
      this.tabData = res.list;
      this.loadHotListFromTab();
    },
    onTabClick(index) {
      this.currentIndex = index;
      this.loadHotListFromTab();
    },
    /**
     * 跳转到 search-blog
     */
    onToSearch() {
      uni.navigateTo({ url: "/subpkg/pages/search-blog/search-blog" });
    },
    /**
     * 获取List列表
     */
    async loadHotListFromTab() {
      // 1.没有获取数据
      // 1.1 展示loading
      this.isLoading = true;
      const id = this.tabData[this.currentIndex].id;
      // 1.2 调用接口获取数据
      const { data: res } = await getHotListFromTabType(id);
      // 1.2 把数据保存到本地
      this.listData[this.currentIndex] = res.list;
      this.isLoading = false;
      // 渲染完成数据之后 计算高度   nextTick在uniapp有兼容性问题 所有用setTimeout
      setTimeout(async () => {
        this.currentSwiperHeight = await this.getCurrentSwiperHeight();
        // 放入缓存
        this.swiperHeightData[this.currentIndex] = this.currentSwiperHeight;
      }, 0);
    },
    /**
     * 计算当前swiper高度
     */
    getCurrentSwiperHeight() {
      // 1.拿到所有的item ->异步
      //累加和
      let sum = 0;
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll(`.hot-list-item-${this.currentIndex}`)
          .boundingClientRect((res) => {
            // 2.拿到所有item的高度
            // 3.把所有的高度叠加
            res.forEach((item) => {
              sum += item.height;
            });
            resolve(sum);
          })
          .exec();
      });
    },
    /**
     * swiper动画完成
     */
    onSwiperEnd() {
      // 判断缓存是否存在，不存在再去获取数据
      if (!this.listData[this.currentIndex]) {
        this.loadHotListFromTab();
        return;
      }
      // 未return 则有缓存数据
      this.currentSwiperHeight = this.swiperHeightData[this.currentIndex];
    },
    /**
     * 监听 swiper 的切换事件
     */
    async onSwiperChange(e) {
      if (this.currentPageScrollTop > 130) {
        // 控制列表滚动位置
        uni.pageScrollTo({ scrollTop: 130 });
      }
      this.currentIndex = e.detail.current;
    },
  },
  /**
   * 监听页面滚动
   */
  onPageScroll(res) {
    this.currentPageScrollTop = res.scrollTop;
  },
  created() {
    this.loadHotTabs();
  },
};
</script>

<style lang="scss" scoped>
.hot-container {
  background-color: $uni-white;

  .logo {
    width: 100%;
    height: 80px;
  }

  .search-box {
    padding: 0 16px;
    margin-bottom: 8px;
  }

  .tab-sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 99;
    /* #ifndef H5 */
    top: 0;
    /* #endif */
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
  }
}
</style>
